<!DOCTYPE html>
<html>
    <head>
        <title>项目查询</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta name="format-detection" content="telephone=no"/>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery.min.js"></script>
		<script src="js/echarts.js"></script> 	
		<script src="js/bootstrap.min.js"></script>	
		<script src="js/radialIndicator.js"></script> 
		<style>
			.p_p {text-align: center;margin-top: 30px;color: #999999;font-size: 12px;border:1px solid #999999;position: relative;padding: 30px 0; margin: 0 10px; border-radius: 20px;}
			/*.top_right_2{z-index: 999;}*/
			@media screen and (max-width: 320px) {
				.p_p {text-align: center;margin-top: 50px; color: #999999;font-size: 12px;}
				.top_right_2 a {color: #0060CA;background: #E0ECF9;padding: 5px 0px;border-radius: 12px;}
			}
			.main{	height: 170px;}
			.p_p_p{	margin-top:120px; }
			.rad-con{ top:10px;} 
			.three .en_detail{float: right;padding-top: 10px;}
			.start-pull-up{text-align: center;display:none;}
			.nodata{margin:0 auto;text-align:center;padding-top:50%;}
			.nodata img{width:50%;height:50%;}
		</style>
	</head>
	<body>
		<div class="col-xs-12 title_top" style="z-index: 9999;">
			<img src="images/logo.png"/>&nbsp;&nbsp;&nbsp;智慧工地物联监管平台  
			<div class="shaixuan">	
				<img src="images/icon_shaixuan.png"/> 
				<div class="cat">筛选</div> 
			</div>
		</div>
		<div class="col-xs-12 ps_content projects">
			<div class="col-xs-12 ps_select">
				<div class="col-xs-12 searchs">
					<div class="col-xs-12 search" name="keyword" style="background: #F2F5F7 ; padding-left: 8px;" >
						<div  style="text-align: left;line-height: 40px;background: url(images/icon_sousuo.png) no-repeat left;background-size: 16px; padding-left: 30px; color: #999999;">
						项目名称、地址、单位 关键词
						</div>
						<!--<input type="text" placeholder="项目名称、地址、单位 关键词" name="keyword"  />-->	
					</div>
					<!--<div class="cat">筛选</div>-->
				</div>
			</div>
			<div class="lists" id="refreshContainer">
			</div>
			<div class="start-pull-up"><img src='images/sx-icon.gif'> </div>
		<div class="col-xs-12 bot navigates"  style="z-index: 9999;">
			<div class="col-xs-3 nav" data-model="home" >
				<div class="myReport">
					<div class="icon_1 icon" ></div>
					<div class="wz">统计</div>
				</div>
			</div>
			<div class="col-xs-3 nav" data-model="project" >
				<div class="myReport active">
					<div class="icon_2 icon active" ></div>
					<div class="wz active">项目</div>
				</div>
			</div>
			<div class="col-xs-3 nav" data-model="news" >
				<div class="myReport">
					<div class="icon_3 icon" ></div>
					<div class="wz">消息</div>
				</div>
			</div>
			<div class="col-xs-3 nav" data-model="member" >
				<div class="myReport">
					<div class="icon_4 icon" ></div>
					<div class="wz">我的</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script>
	window.onload = function(){
		ajax_lists(1,10,'down');
	}
	var curPage = 1;
	var pageSize = 10;
	mui.init({
		pullRefresh : {
			container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			down : {
			  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			  color:'#00A4FF', //可选，默认“#2BD009” 下拉刷新控件颜色
			  height:'100px',//可选,默认50px.下拉刷新控件的高度,
			  range:'100px', //可选 默认100px,控件可下拉拖拽的范围
			  offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
			  callback :function(){ 
					curPage = 1;
					ajax_lists(curPage,pageSize,'down');
					mui('#refreshContainer').pullRefresh().endPulldown();
			  }
			},
			up : {
			  height:100,//可选.默认50.触发上拉加载拖动距离
			  contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
			  contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
			  callback :function(){
					curPage++;
					$(".start-pull-up").show();
					ajax_lists(curPage,pageSize,'up'); 
					$(".start-pull-up").hide();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); 
			  }
			}
		}
	});
	mui.plusReady(function(){
		mui(".searchs").on("tap",".search",function(){
			redirect('search.html');
		});
		mui(".title_top").on("tap",".cat",function(){
			redirect('cat.html');
		});
		//查看详情
		mui(".lists").on("tap",".top_right_2 a",function(){
			var id = $(this).data('id');
			var url = $(this).attr('class')+".html";
			redirect(url,{projectID:id,});
		});
	});
	function en_status_text($status=0){
		$text = '';
		switch($status){
			case -1:
				$text = '<span style="color:#ccc;">未安装</span>';
				break;
			case 1:
				$text = '<span style="color:red;">超标</span>';
				break;
			case 2:
				$text = '<span style="color:#ccc;">离线</span>';
				break;
			default:
				$text = '<span style="color:green;">正常</span>';
				break;
		}
		return $text;
	}
	function parseParam(params,token,curPage,pageSize){
		var data = {};
		data.api = 'search-project-real-info';
		data.curPage = curPage;
		data.pageSize = pageSize;
		data.token = token;
		if(params.monitorAlarm != undefined ){
			data.monitorAlarm = params.monitorAlarm;
		}
		if(params.text != undefined ){
			data.text = params.text;
			$("input[name=keyword]").val(params.text);
			$("input[name=keyword]").css({"text-align":"left","padding-left":"25px"});
		}
		if(params.projectCattgory != undefined ){
			data.projectCattgory = params.projectCattgory;
		}
		if(params.isMajorProject != undefined ){
			data.isMajorProject = params.isMajorProject;
		}
		if(params.buidSize != undefined ){
			data.buidSize = params.buidSize;
		}
		if(params.monitorAlarm != undefined ){
			data.monitorAlarm = params.monitorAlarm;
		}
		if(params.projectNewly != undefined ){
			data.projectNewly = params.projectNewly;
		}
		return data;
	}
	function ajax_lists(curPage,pageSize,type){
		mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = parseParam(params,token,curPage,pageSize);
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							if(ref.data.records.length == 0  && curPage == 1){
								$(".lists").html("<div class='nodata'><img src='images/nodata.png'></div>");
								return false;
							}else{
								mui.each(ref.data.records,function(i,v){
									var _html = '';
									_html += '<div class="col-xs-12 ps_content_pss">';
									_html += '<div class="col-xs-12 ps_content_ps">';
									_html += '<div class="col-xs-12 ps_content_ps_title">'+v.projectname+'</div>';
									_html += '<div class="col-xs-12 ps_content_ps_text">施工单位：'+v.builders+'</div>';
									_html += '<ul id="myTab_'+i+'" class="col-xs-12 cnav nav-tabs">';
									_html += '<li class="col-xs-2"><a href="#one_'+v.projectid+'" data-toggle="tab">塔机</a></li>';
									_html += '<li class="col-xs-2"><a href="#two_'+v.projectid+'" data-toggle="tab">升降机</a></li>';
									_html += '<li class="col-xs-2"><a href="#three_'+v.projectid+'" data-toggle="tab">环保监测</a></li>';
									_html += '<li class="col-xs-2"><a href="#four_'+v.projectid+'" data-toggle="tab">劳务实名</a></li>';
									_html += '<li class="col-xs-2"><a href="#five_'+v.projectid+'" data-toggle="tab">视频监控</a></li>';
									_html += '</ul>';
									_html += '<div id="myTabContent" class="col-xs-12 tab-content">';
									_html += '<div class="tab-pane fade in active col-xs-12" id="one_'+v.projectid+'">';
									_html += '<div class="col-xs-6">';
									_html += '<div id="t_'+v.projectid+'" class="main"></div></div>';
									_html += '<div class="col-xs-6 xs_6">';
									_html += '<div class="top_right_1">塔机总计'+v.t_devicecount+'台</div>';
									_html += '<div class="top_right_2">';
									_html += '<div class="st_1"></div>';
									_html += '&nbsp;&nbsp;&nbsp;在线：<span class="st_3">'+v.t_onlinecount+'台</span></a>';
									_html += '</div>';
									_html += '<div class="top_right_2"><div class="st_2"></div>';
									_html += '&nbsp;&nbsp;&nbsp;报警：';
									_html += '<span class="st_3">'+v.t_alarmcount+'台</span>';
									_html += '<div style="margin-top:20px">';
									_html += '<a href="javascript:;" class="t_detail" data-id="'+v.projectid+'">查看详情&nbsp;<div class="right-arrow"></div>';
									_html += '</a>';
									_html += '</div>';
									_html += '</div></div></div>';
									_html += '<div class="tab-pane fade col-xs-12 " id="two_'+v.projectid+'">';
									_html += '<div class="col-xs-6"><div id="el_'+v.projectid+'" class="main"></div></div>';
									_html += '<div class="col-xs-6 xs_6"><div class="top_right_1">升降机总计'+v.el_devicecount+'台</div>';
									_html += '<div class="top_right_2"><div class="st_1"></div>&nbsp;&nbsp;&nbsp;在线：';
									_html += '<span class="st_3">'+v.el_onlinecount+'台</span></a></div>';
									_html += '<div class="top_right_2">';
									_html += '<div class="st_2"></div>';
									_html += '&nbsp;&nbsp;&nbsp;报警：';
									_html += '<span class="st_3">'+v.el_alarmcount+'台</span>';
									_html += '<div style="margin-top:20px">';
									_html += '<a href="javascript:;" class="el_detail" data-id="'+v.projectid+'">查看详情&nbsp;<div class="right-arrow"></div>';
									_html += '</a>';
									_html += '</div>';
									_html += '</div></div></div>';
									_html += '<div class="tab-pane fade col-xs-12" id="three_'+v.projectid+'">';
									_html += '<div class="col-xs-12 top">';
									_html += '<div class="col-xs-4 one">';
									_html += '<div class="prg-cont rad-prg" id="en_PM10_isoverproof_">';
									_html += '<div class="rad-con"><p class="p_p">PM10</p></div></div>';
									_html += '<div class="col-xs-12 p_p_p">'+en_status_text(v.en_PM10_isoverproof)+'</div></div>';
									_html += '<div class="col-xs-4 two"><div class="prg-cont rad-prg" id="en_PM2p5_isoverproof_">';
									_html += '<div class="rad-con"><p class="p_p">PM2.5</p></div></div>';
									_html += '<div class="col-xs-12 p_p_p">'+en_status_text(v.en_PM2p5_isoverproof)+'</div></div>';
									_html += '<div class="col-xs-4 three"><div class="prg-cont rad-prg" id="en_noise_isoverproof_" style="z-index:1;" >';
									_html += '<div class="rad-con"><p class="p_p">噪声</p></div></div>';
									_html += '<div class="col-xs-12 p_p_p">'+en_status_text(v.en_noise_isoverproof)+'</div><div class="col-xs-12 top_right_2" >';
									_html += '<div style="margin-top:20px">';
									_html += '<a href="javascript:;" class="en_detail" data-id="'+v.projectid+'">查看详情&nbsp;<div class="right-arrow"></div>';
									_html += '</a>';
									_html += '</div>';
									_html += '</div></div></div></div>';
									_html += '<div class="tab-pane fade col-xs-12" id="four_'+v.projectid+'"><div class="col-xs-6">';
									_html += '<div id="l_'+v.projectid+'"  class="main"></div></div><div class="col-xs-6 xs_6">';
									_html += '<div class="top_right_1">施工总人数'+v.l_personcount+'人</div><div class="top_right_2">';
									_html += '<div class="st_1"></div>&nbsp;&nbsp;&nbsp;进场总人数：<span class="st_3" >'+v.l_enterworkcount+'人</span></a>';
									_html += '</div><div class="top_right_2"><div class="st_2"></div>';
									_html += '&nbsp;&nbsp;&nbsp;缺勤：<span class="st_3">'+v.l_keydutycount+'人</span>';
									_html += '<div style="margin-top:20px">';
									_html += '<a href="javascript:;" class="l_detail" data-id="'+v.projectid+'">查看详情&nbsp;<div class="right-arrow"></div>';
									_html += '</a>';
									_html += '</div>';
									_html += '</div></div></div>';
									_html += '<div class="tab-pane fade col-xs-12" id="five_'+v.projectid+'"><div class="col-xs-6">';
									_html += '<div id="v_'+v.projectid+'"  class="main"></div></div>';
									_html += '<div class="col-xs-6 xs_6"><div class="top_right_1">视频设备总计'+v.v_devicecount+'台</div>';
									_html += '<div class="top_right_2">';
									_html += '<div class="st_1"></div>&nbsp;&nbsp;&nbsp;在线：<span class="st_3">'+v.v_onlinecount+'台</span>';
									_html += '</a></div><div class="top_right_2"><div class="st_2"></div>';
									_html += '&nbsp;&nbsp;&nbsp;违规：<span class="st_3">'+v.v_catchrulescount+'次</span>';
									_html += '<div style="margin-top:20px">';
									_html += '<a href="javascript:;" class="v_detail" data-id="'+v.projectid+'">查看详情&nbsp;<div class="right-arrow"></div>';
									_html += '</a>';
									_html += '</div>';
									_html += '</div></div></div></div></div></div></div>';
									if(type == 'down' && i == 0){
										$(".projects .lists").html(_html);
									}else{
										$(".projects .lists").append(_html);
									}
									var t_chart = echarts.init(document.getElementById('t_'+v.projectid));
									option = {color:['#00A4FF','#FD5452'],series : [{type: 'pie',radius : '80%',center: ['50%', '50%'],
											itemStyle : {normal : {labelLine : {show : false}}},
											data:[{value:v.t_onlinecount},{value:v.t_alarmcount},],}]};
									t_chart.setOption(option);
									var mainContainer_1 = document.getElementById('el_'+v.projectid);
									var mainContainer_2 = document.getElementById('l_'+v.projectid);
									var mainContainer_3 = document.getElementById('v_'+v.projectid);
									//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
									var resizeMainContainer_1 = function () { 
											mainContainer_1.style.width = window.innerWidth-150+'px';
									}; 
									var resizeMainContainer_2 = function () { 
											mainContainer_2.style.width = window.innerWidth-150+'px';
									}; 
									var resizeMainContainer_3 = function () { 
											mainContainer_3.style.width = window.innerWidth-150+'px';
									}; 
									//设置div容器高宽
									resizeMainContainer_1();
									resizeMainContainer_2();
									resizeMainContainer_3();
									// 初始化图表
									var mainChart = echarts.init(mainContainer_1);
									$(window).on('resize',function(){//
											//屏幕大小自适应，重置容器高宽
											resizeMainContainer();
											mainChart.resize();
									});
									var el_chart = echarts.init(document.getElementById('el_'+v.projectid));
									option = {color:['#00A4FF','#FD5452'],series : [{type: 'pie',radius : '65%',center: ['32%', '50%'],
											itemStyle : {normal : {labelLine : {show : false}}},
											data:[{value:v.el_onlinecount},{value:v.el_alarmcount},],}]};
									el_chart.setOption(option);  
								 
									var l_chart = echarts.init(document.getElementById('l_'+v.projectid));
									option = {color:['#00A4FF','#FD5452'],series : [{type: 'pie',radius : '65%',center: ['32%', '50%'],
											itemStyle : {normal : {labelLine : {show : false}}},
											data:[{value:v.l_enterworkcount},{value:v.l_keydutycount},],}]};
									l_chart.setOption(option);
									var v_chart = echarts.init(document.getElementById('v_'+v.projectid));
									option = {color:['#00A4FF','#FD5452'],series : [{type: 'pie',radius : '65%',center: ['32%', '50%'],
											itemStyle : {normal : {labelLine : {show : false}}},
											data:[{value:v.v_onlinecount},{value:v.v_catchrulescount},],}]};
									v_chart.setOption(option);
									$('#en_PM10_isoverproof_'+v.projectid).radialIndicator({
										barColor: '#F99A1E',
										barWidth: 5,
										initValue: 0,
										roundCorner : true,
										percentage: true	
									});
									$('#en_PM2p5_isoverproof_'+v.projectid).radialIndicator({
										barColor: '#7C79B0',
										barWidth: 5,
										initValue: 0,
										roundCorner : true,
										percentage: true	
									});
									$('#en_noise_isoverproof_'+v.projectid).radialIndicator({
										barColor: '#929199',
										barWidth: 5,
										initValue: 0,
										roundCorner : true,
										percentage: true	
									});
									function initValue(){ return a();}
									var eq = 0;
									if(params.monitorAlarm == 4){
										eq = 3;
									}else if(params.monitorAlarm == 3){
										eq = 4;
									}else if(params.monitorAlarm == 1){
										eq = 1;
									}else if(params.monitorAlarm == 2){
										eq = 2;
									}
									$('#myTab_'+i+' li:eq('+eq+') a').tab('show');
								});
							}
						}
						return false;
					}
			});
			mui(".navigates").on('tap','.nav',function(){
				var model = $(this).data('model');
				var url = '';
				if(model != 'project' ){
					switch(model){
						case 'project':
							url = 'lists.html';
							break;
						case 'news':
							url = 'news.html';
							break;
						case 'member':
							url = 'userinfo.html';
							break;
						default:
							url = 'home.html';
					}
					redirect(url);
				}
				return false;
			});
		});
	}
</script>